<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="lizhao-navBar">
			<view class="lizhao-input">
				<uni-icons type="search" color="#fe0000" size="20" style="font-weight: bold;" />
				<text class="input-text">暴力禁区电影 | 马东锡 | 老撕机 | 复仇者联盟4</text>
			</view>
		</view>
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item, index) in tabBars" :key="item.id" class="nav-item" :class="{ current: index === tabCurrentIndex }" :id="'tab' + index" @click="changeTab(index)">
				{{ item.name }}
			</view>
		</scroll-view>

		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
				<swiper-item v-for="(tabItem, index) in tabBars" :key="index">
					<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore">
						
						<view v-for="(item, index2) in tabItem.newsList" :key="index2" class="news-item" >
							<image id="topimg" :src="item.topimg" style="width: 100%;" mode="widthFix"/>
							<view class="uni-list" @tap="useDetails(item.Advert)">
								<view class="uni-list-cell" hover-class="uni-list-cell-hover">
									<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
										<view class="uni-media-list-body">
											<text class="imageInfo">{{ item.Advert.imageInfo }}</text>
											<image lazy-load class="image" :src="item.Advert.src"></image>
											<view class="iconfont icon-weibiaoti-"></view>
											<view class="image-bottom">
												<text class="left">{{ item.Advert.play }}</text>
												<text class="right">{{ item.Advert.duration }}</text>
											</view>
										</view>
										<view class="uni-media-list-bottom">
											<image lazy-load :src="item.Advert.account.headImg" class="image"></image>
											<view class="center">
												<view class="center-top">
													<text>{{ item.Advert.account.name }} ·</text>
													<text :class="item.Advert.account.isFollow">{{ item.Advert.account.isFollow ? '已关注' : '关注' }}</text>
												</view>
												<view class="center-bottom">{{ item.Advert.account.autograph }}</view>
											</view>
											<view class="right" v-if="item.Advert.isAdvertisement">
												<view class="see">查看详情</view>
												<uni-icons type="closeempty" color="#000" size="20" style="font-weight: bold;" />
											</view>
											<view class="right" v-else>
												<view class="iconfont icon-pinglun-"><text class="text">123</text></view>
												<view class="iconfont icon-more"></view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<image id="footerimg" :src="item.footerimg" style="width: 100%;" mode="widthFix"/>
						</view>
						
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</mix-pulldown-refresh>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import uniIcons from '@/components/uni-icons/uni-icons';
// 下拉刷新
import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
let windowWidth = 0,
	scrollTimer = false,
	tabBar;
export default {
	components: {
		uniIcons,
		mixPulldownRefresh,
		mixLoadMore
	},
	computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
	data() {
		return {
			tabCurrentIndex: 1, //当前选项卡索引
			scrollLeft: 0, //顶部选项卡左滑距离
			enableScroll: true,
			tabList: [
				{
					//头部tab
					name: '关注',
					id: '1'
				},
				{
					name: '推荐',
					id: '2'
				},
				{
					name: '电影',
					id: '3'
				},
				{
					name: '电视剧',
					id: '4'
				},
				{
					name: '直播',
					id: '5'
				},
				{
					name: '小视频',
					id: '6'
				}
			],
			tabBars: [
				{
					//头部tab
					name: '关注',
					type: 1, //1关注
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				},
				{
					name: '推荐',
					type: 2,
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				},
				{
					name: '电影',
					type: 3,
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				},
				{
					name: '电视剧',
					type: 4,
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				},
				{
					name: '直播',
					type: 5,
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				},
				{
					name: '小视频',
					type: 6,
					newsList: [],
					loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
					refreshing: 0,
					pageNum: 0 //当前页
				}
			]
		};
	},
	async onLoad() {
		let that = this;
		// 获取屏幕宽度
		windowWidth = uni.getSystemInfoSync().windowWidth;
		this.loadNewsList('refresh');
	},
	methods: {
		//点击每一项
		useDetails(item){
			if(item.isAdvertisement){
				let data=JSON.stringify(item)
				uni.navigateTo({
					url: `../advertisement/advertisement?data=${data}`,
					animationType:'zoom-fade-out',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		//默认加载第一项
		loadNewsList(type) {
			let that = this;
			let tabItem = this.tabBars[this.tabCurrentIndex];
			//下拉刷新 关闭刷新动画
			if (type === 'refresh') {
				setTimeout(() => {
					this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
				}, 1000);
				// #ifdef APP-PLUS
				tabItem.refreshing = false;
				// #endif
				tabItem.loadMoreStatus = 0;
				//业务处理
				tabItem.pageNum = 1;
				tabItem.newsList = []; //刷新前清空数组
				if(tabItem.type==2){//1关注 2推荐
					that.randomfn(1)
				}
			}
			//上滑加载 处理状态
			if (type === 'add') {
				console.log(tabItem.loadMoreStatus);
				if (tabItem.loadMoreStatus === 2) {
					return;
				}
				//当前页加加
				tabItem.pageNum++;
				//显示加载中//0加载前，1加载中，2没有更多了
				tabItem.loadMoreStatus = 1;
				console.log(tabItem.type);
				that.randomfn(tabItem.pageNum);
			}
		},
		//业务逻辑//关注
		randomfn(pageNum) {
			let that = this;
			let tabItem = this.tabBars[this.tabCurrentIndex];
			let	req={
					pageSize:10,//每页的数量 
					pageNum:pageNum,// 当前显示第几页
					page:true,
				}
			uni.request({
				url: 'http://admin.jzldy.com:8999/utuifiles/json/xigua.json?random='+Math.random(), //仅为示例，并非真实接口地址。
				data: req,
				success: (res) => {
					// console.log(res.statusCode);
					if(res.statusCode==200){
						tabItem.newsList =[res.data]
						console.log(JSON.stringify(tabItem.newsList))
					}else{
						uni.showToast({
							title: res.errMsg,
							icon:'none'
						});
					}
					
					
				}
			});
			//推荐
			// tabItem.newsList = [
				
			// 	{
			// 		isAdvertisement: true, //是否广告
			// 		imageInfo: '新滨湖恒大文化旅游城，即将盛大发售', //图片信息
			// 		src: '../../static/img/image2.png', //图片地址
			// 		play: '10万次观看',
			// 		duration: '02:41', //时长
			// 		account: {
			// 			//简介信息
			// 			video:'http://vd1.bdstatic.com/mda-hhnivz2b0xjtu0et/sc/mda-hhnivz2b0xjtu0et.mp4',
			// 			headImg: '../../static/img/tabbarC1.png', //作者头像
			// 			name: '新滨湖恒大文化..', //名称
			// 			isFollow: false, //是否关注
			// 			autograph: '广告' ,//签名
			// 			htmlUrl:'http://static.youtui.co/gp/ ',//广告详情页图片
			// 		}
			// 	}
			// ];
				// tabItem.newsList = [
				// 	{
				// 		isAdvertisement: false, //是否广告
				// 		imageInfo: '日本模特面无表情，当把帽子摘下的那一刻，瞬间惊艳！', //图片信息
				// 		src: '../../static/img/image1.png', //图片地址
				// 		play: '10万次观看',
				// 		duration: '02:41', //时长
				// 		account: {
				// 			//简介信息
				// 			headImg: '../../static/img/man1.png', //作者头像
				// 			name: '打遍天下无影手', //名称
				// 			isFollow: false, //是否关注
				// 			autograph: '风行旗下官方账号' //签名
				// 		}
				// 	},
				// 	{
				// 		isAdvertisement: true, //是否广告
				// 		imageInfo: '新滨湖恒大文化旅游城，即将盛大发售', //图片信息
				// 		src: '../../static/img/image2.png', //图片地址
				// 		play: '10万次观看',
				// 		duration: '02:41', //时长
				// 		account: {
				// 			//简介信息
				// 			video:'http://vd1.bdstatic.com/mda-hhnivz2b0xjtu0et/sc/mda-hhnivz2b0xjtu0et.mp4',
				// 			headImg: '../../static/img/tabbarC1.png', //作者头像
				// 			name: '新滨湖恒大文化..', //名称
				// 			isFollow: false, //是否关注
				// 			autograph: '广告' ,//签名
				// 			htmlUrl:'http://static.youtui.co/gp/ ',//广告详情页图片
				// 		}
				// 	},
				// 	{
				// 		isAdvertisement: false, //是否广告
				// 		imageInfo: '日本模特面无表情，当把帽子摘下的那一刻，瞬间惊艳！', //图片信息
				// 		src: '../../static/img/image3.png', //图片地址
				// 		play: '10万次观看',
				// 		duration: '08:41', //时长
				// 		account: {
				// 			//简介信息
				// 			headImg: '../../static/img/man2.png', //作者头像
				// 			name: '好剧放映机', //名称
				// 			isFollow: false, //是否关注
				// 			autograph: '寻找优质好剧，每日与君分享' //签名
				// 		}
				// 	}
				// ];
		},
		//下拉刷新
		onPulldownReresh() {
			let that = this;
			// setTimeout(()=>{
			// 	this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
			// },1000)
			that.loadNewsList('refresh');
		},
		//上滑加载
		loadMore() {
			// this.loadNewsList('add');
		},
		//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
		setEnableScroll(enable) {
			if (this.enableScroll !== enable) {
				this.enableScroll = enable;
			}
		},

		//tab切换
		async changeTab(e) {
			if (scrollTimer) {
				//多次切换只执行最后一次
				clearTimeout(scrollTimer);
				scrollTimer = false;
			}
			let index = e;
			//e=number为点击切换，e=object为swiper滑动切换
			if (typeof e === 'object') {
				index = e.detail.current;
			}
			if (typeof tabBar !== 'object') {
				tabBar = await this.getElSize('nav-bar');
			}
			//计算宽度相关
			let tabBarScrollLeft = tabBar.scrollLeft;
			let width = 0;
			let nowWidth = 0;
			//获取可滑动总宽度
			for (let i = 0; i <= index; i++) {
				let result = await this.getElSize('tab' + i);
				width += result.width;
				if (i === index) {
					nowWidth = result.width;
				}
			}
			if (typeof e === 'number') {
				//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
				this.tabCurrentIndex = index;
			}
			//延迟300ms,等待swiper动画结束再修改tabbar
			scrollTimer = setTimeout(() => {
				if (width - nowWidth / 2 > windowWidth / 2) {
					//如果当前项越过中心点，将其放在屏幕中心
					this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
				} else {
					this.scrollLeft = 0;
				}
				if (typeof e === 'object') {
					this.tabCurrentIndex = index;
				}
				this.tabCurrentIndex = index;

				//第一次切换tab，动画结束后需要加载数据
				let tabItem = this.tabBars[this.tabCurrentIndex];
				if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
					this.loadNewsList('add');
					tabItem.loaded = true;
				}
			}, 300);
		},
		//获得元素的size
		getElSize(id) {
			return new Promise((res, rej) => {
				let el = uni.createSelectorQuery().select('#' + id);
				el.fields(
					{
						size: true,
						scrollOffset: true,
						rect: true
					},
					data => {
						res(data);
					}
				).exec();
			});
		}
	}
};
</script>

<style scoped lang="scss">
@import './main.scss';
.swiper-box {
	height: 100%;
}
.panel-scroll-box {
	height: 90%;
}
</style>
